<template>
  <div>
    <div style="width: 100%; text-align: center">
      <el-card style="width: 50%; margin-left: 25%">
        <h3>前言</h3>
        <h3>全权限账号：frank 1234</h3>
        <h3>无权限账号：jack 1234</h3>
      </el-card>
      <el-card style="width: 50%; margin-left: 25%">
        <el-input
          v-model="user.username"
          prefix-icon="iconfont icon-user"
        ></el-input>
        <el-input
          type="password"
          v-model="user.password"
          prefix-icon="iconfont icon-3702mima"
        ></el-input>
        <el-button style="margin-top: 20px" type="primary" @click="login"
          >登录测试</el-button
        >
      </el-card>
    </div>
    <div style="width: 100%; text-align: center">
      <el-card style="width: 50%; margin-left: 25%">
        <h3>获取到的token为:</h3>
        <el-input v-model="user.token"></el-input>
        <el-button type="primary" style="margin-top: 20px" @click="getuserlist"
          >权限测试</el-button
        >
        <h3>查询结果：{{ msg }}</h3>
      </el-card>
    </div>
  </div>
</template>

<script>
import testapi from "../request/api";
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
        token: "",
      },
      msg: "请查询",
    };
  },
  created() {
    this.getyiyan();
  },
  methods: {
    login() {
      if (this.user.username == "" || this.user.password == "") {
        this.$Message.error("不能为空");
        return;
      }
      testapi.login(this.user.username, this.user.password).then((res) => {
        if (res.code != 200) {
          this.$Message.error("登录失败！请重试");
        } else {
          this.$Message.success("获取token成功");
          console.log(res.data.token);
          this.user.token = res.data.token;
        }
      });
    },
    getuserlist() {
      if (this.user.token == "") {
        this.$Message.error("token 为空");
        return;
      }
      testapi.getuserlist(this.user.token).then((res) => {
        this.msg = res.msg;
      });
    },
    logout() {
      testapi.logout().then((res) => {
        console.log(res.code);
      });
    }
  },
};
</script>